My experience with Adobe XD in designing web interfaces

in the first projects I worked on in the field of web development, and even developing my personal site, I used the design approach directly on the browser, that is, I was making a quick layout of the site on paper, and then I did the design process directly in the browser While writing code, it is a common approach among developers. What distinguishes this method is the high productivity at work, because you will skip the step of designing the site on Illustrator (or Photoshop), a step whose purpose is to present the work to the client before starting the process of converting the design into code.

Well, I did many projects this way, and everything was smooth, until the tipping point came when I dealt with a reluctant type client, who depends on a certain part, and then comes back to amend it.. I don't exaggerate when I say that the project turned out to be hell - literally Because each time modifying the code, the resulting code is very bad, and with each modification the code becomes more complex. And I came to the conclusion that the design method on the browser may be appropriate if you are working on a personal project, or that the client has given you all the powers to work on the project, but if the project is a take-and-take, then this method is not good at all.

Then I tried designing the site on Illustrator before converting to code, and the project was really smooth; After the design was approved by the client, the resulting code was clean and tidy.

After that, I heard about Adobe XD program, which is dedicated to designing user interfaces.. After reviewing its features, I decided to work on it immediately, and the visual design process for the site turned into an easy and smooth process. The productivity of the program is very high, and it contains beautiful features / tools that help a lot in The world of web design.

One of the strongest features of the program One

• of the most powerful features in the program is the ability to save certain patterns (a certain color / type and font size) and use them in your project with ease, and if you make any modification to these patterns, the modification is circulated to all pages automatically. This means that you can change the main color in the whole project with the press of a button. No, but you can save a specific block of the design - say Header, for example - and repeat it in the pages, and when you change any part of the block, it is generalized to the entire design.
  This point in particular is enough to move to the program, a huge feature that will save you a lot of time, and you will bypass the boring moments in case you want to make a specific modification to the pages of the site. Through this feature, you can make a complete so-called Style Guide for the site, and build your site on it, which will facilitate the building of the site, as well as facilitate the process of modifying the design in the future.

• Also, one of the strongest features is the ability to link the pages with each other, meaning that the buttons in the design will be clickable, and when sharing the work with the client, the client can deal with the design as if it was an existing site, providing the client with an experience similar to the shape of the final site.

• Repeat Grid feature, with which you can easily and accurately repeat certain elements in the design. With changing the content of duplicate items with the click of a button!

• Of course, as long as the program is from Adobe, it has great integration with Illustrator and Photoshop, for example, you can design an icon in Illustrator and transfer it to the program to control it completely from changing the color or even modifying the design of the icon itself.

• There are more powerful features that may come soon, you can view them from here.

Of course, the program is not the first of its kind, there is the Sketch program, which works exclusively on the Mac, but the program remains a qualitative leap for those who used Illustrator or Photoshop in designing user interfaces.

Notes from my experience

• The program is very simple, and it only took me hours, to see its tools, and to know how they work, of course this is for those who are experienced in my programs, Illustrator and Photoshop. This means that the cost of moving to work on the program is simple, and it is only several hours of your time, and I promise you to recover this time in the next project for you.

• The Mac version supports writing in Arabic with some minor problems, but unfortunately for now the Windows version does not support writing in Arabic - until the time of writing This article is for - but that is likely to change soon, especially since the program is still in beta stage.
  Update: Now, the program supports the Arabic language on Windows.. wonderfully!

• On Windows, you must have the latest version of Windows 10 to be able to use the program, and this may be annoying to some.

• Of course, the program is dedicated to the design of interfaces, and has nothing to do with the code.. Currently, I do not think that there is anything better than writing the code manually.

The summary of my experience is that the program is very powerful, as it contains tools that are not found in Illustrator and Photoshop, but they are very needed in the world of interface design, and it is not stuffed with many tools that you will not need in the world of interface design, which makes the program powerful / simple / fast.